<style lang="less">
@import "../../../assets/style/photo.less";
</style>

<template>
	<mxq-router-layout>
        <div class="photo">
            <Head slot="header" @headerClick="headerClick($event)">
                <div slot="headerTitle">
                    <span>{{towerName}}杆塔</span>
                </div>
                <div slot="headerRight">
                    <!-- <span>导航</span> -->
                </div>
            </Head>
            <span class="iconBox">
                <img
                    class="iconRight"
                    src="../../../assets/img/changguixunshi/icon_rw.png"
                    alt=""
                    @click="punchCard"
                >
                <em class="iconText">{{iconText}}</em>
            </span>

            <!-- 拍照 start -->
            <!-- <take-photo
                :pohtoParam="pohtoParam"
                :photoLists="photoLists"
                :pohtoShow="pohtoShow"
                @quexian_data="initQuanxian"/> -->
            <!-- 拍照 end -->

            <van-row  @quexian_data="initQuanxian">
                <van-col class="col_item" span="24" v-for="(item,index) in photoLists" :key="index">
                    <p class="photo_item clearfix">
                        <label :for="item.title">{{item.title}}</label>
                        <span class="img_box clearfix">
                            <img :src="item.photoImg" alt="" style="width: 50px; float: left;" class="img_pho" @click="prompt">
                        </span>
                    </p>
                </van-col>
            </van-row>

            <van-row class="quexian_item">
                <van-col span="24">
                    <p class="photo_item tit_item clearfix">
                        <label for="架空线路缺陷核查"><em>*</em>架空线路缺陷核查</label>
                    </p>
                </van-col>
            </van-row>

            <!-- 八大线路缺陷 开始 -->
            <quexian-list
                :listLeftImg="listLeftImg" 
                :type_arr="type_arr"
                @quexianClick="quexianClick($event)"/>
            <!-- 八大线路缺陷 结束 -->
            <div class="btns">
                <van-tabbar>
                    <van-tabbar-item>
                        <van-button size="small" class="btn_l" @click="goYhList">隐患情况</van-button>
                    </van-tabbar-item>
                    <van-tabbar-item>
                        <van-button size="small" class="btn_r" @click="goClArea">测量记录</van-button>
                    </van-tabbar-item>
                </van-tabbar>
            </div>
        </div>
    </mxq-router-layout>
</template>

<script>
import Head from '../../../components/head'
// import TakePhoto from '../../components/taskTake-photo'
import QuexianList from '../../../components/quexian'
import photoImg from '../../../assets/img/changguixunshi/icon_dispho.png'
import iconHis from '../../../assets/img/changguixunshi/icon_histroy.png'
import { callData } from '../../../axios/axios'
import { getLocation } from '../../../api/android'
import { getFlatternDistance } from '../../../libs/util'
import disPho from '../../../assets/img/changguixunshi/icon_dispho.png'

import { 
    Row,
    Col,
    Tabbar,
	TabbarItem,
	Button,
    Dialog,
    Toast
} from 'vant'

export default {
    components: {
        Head,
        // TakePhoto,
        QuexianList,
        [Row.name]: Row,
        [Col.name]: Col,
        [Tabbar.name]:Tabbar,
        [TabbarItem.name]:TabbarItem,
        [Button.name]:Button,
        [Dialog.name]:Dialog
    },
    data() {
        return {
            towerName: this.$route.query.towerName,
            locate: {},
            iconText: '打卡',
            /* pohtoParam: {},
            pohtoShow: {
                type: 'bdzs',
                img: false
            }, */
            photoLists: [
                {
                    title: "杆塔牌拍照",
                    photoImg: disPho
                },
                {
                    title: "杆基拍照",
                    photoImg: disPho
                },
                {
                    title: "全塔拍照",
                    photoImg: disPho
                },
                {
                    title: "塔头拍照",
                    photoImg: disPho
                },
                {
                    title: "大号侧同拍照",
                    photoImg: disPho
                },
                {
                    title: "小号侧同拍照",
                    photoImg: disPho
                }
            ],
            jdwdMeg:{
            	lon:'00.000000',
            	lat:'00.000000',
            	address:'',
            	distance:''
            },	
            // 历史图标
            listLeftImg:[iconHis,iconHis,iconHis,iconHis,iconHis,iconHis,iconHis,iconHis,iconHis],
            type_arr: {},
            params: this.$route.query
        }
    },
    methods: {
        // 头部两侧按钮点击事件
        headerClick(e){
            this.show=true;
        },
    	// 八大缺陷的点击事件
		quexianClick(e){
    		let query = {
                name: e.allName,
                flag: e.FLAG,
                towerId: this.params.towerId,
                towerTaskId: this.params.xsTowerTaskId,
                taskId: this.params.zsTaskId,
                defectType: e.index,
                xsTowerTaskId: this.params.xsTowerTaskId,
                lineTowerId: this.params.lineTowerId,
                lineId: this.params.lineId,
                status: this.params.status,
                towerStatus:this.params.towerStatus,
                lineName: this.params.lineName,
                towerName: this.params.towerName,
                zsTaskId: this.params.zsTaskId,
                page: this.params.page,
                size: this.params.size,
                index: this.params.index
            }
			this.$router.push({
				name:'bdzs_quexianList',
				query: query
			})
		},
		alertMeg(){
			Dialog.alert({
                // on confirm
				message: '只有接任务后，才可以继续接下来的操作'
			}).then(() => {
				// on close
			});
        },
        // 初始化缺陷数据
        initQuanxian(e){
            this.type_arr = e;
        },
        // 打卡
        punchCard() {
        	const _this = this;
        	const local = _this.locate
            if (window.Cordova) {
            	//调安卓进行定位
    			getLocation(res => {
					let distance2 = getFlatternDistance(Number(res.data.lat), Number(res.data.lon), Number(local.WD), Number(local.JD));
					_this.jdwdMeg = {
		            	lon:res.data.lon, // 经度
		            	lat:res.data.lat, // 纬度
		            	address:res.data.address,  // 当前的地理位置
		            	distance: distance2   //打卡距离
					}
					console.log(distance2)
					if (distance2 > local.RANGE) {
						_this.updateLocate();
		           	}else{
		           		//点击确认打卡操作
		           		Dialog.alert({									  
						  confirmButtonText:'确认',
						  message: '您已进入范围内，可以进行打卡',
						  closeOnClickOverlay:true,
						}).then(() => {
						  // on close,
						  _this.punchCardSure();
						});
		           	}
    			})
            } else {
            	var res={data:{lat:'34.726583',lon:'114.473915'}}//43.8225763061,87.5986289978
            	let distance2 = getFlatternDistance(Number(res.data.lat), Number(res.data.lon), Number(local.WD), Number(local.JD));
            	_this.jdwdMeg = {
	            	lon: res.data.lon, // 经度
	            	lat: res.data.lat, // 纬度
	            	address: '测试地址',  // 当前的地理位置
	            	distance: distance2
				}
            	console.log(distance2)
				if (distance2 > local.RANGE) {
					_this.updateLocate();
	           	}else{
	           		//点击确认打卡操作
	           		Dialog.alert({									  
					  confirmButtonText:'确认',
					  message: '您已进入范围内，可以进行打卡',
					  closeOnClickOverlay:true,
					}).then(() => {
					  // on close,现在可以调打卡接口
					  _this.punchCardSure();
					});
	           	}
            }
       	},
       	//更新定位
       	updateLocate() {
       		const _this =this;
       		const local = _this.locate;
       		Dialog.confirm({									  
			  confirmButtonText:'更新位置',
			  message: '接收任务时必须距离任务杆塔500米内，否则不能打卡接受任务',
			  closeOnClickOverlay:true,
			}).then(() => {
			  	getLocation(res => {
					let distance2 = getFlatternDistance(Number(res.data.lat), Number(res.data.lon), Number(local.WD), Number(local.JD));
					_this.jdwdMeg = {
		            	lon:res.data.lon, // 经度
		            	lat:res.data.lat, // 纬度
		            	address:res.data.address,  // 当前的地理位置
		            	distance: distance2
					}
					if (distance2 > local.RANGE) {
						_this.updateLocate()
				    } else {
			          	Dialog.alert({									  
						  confirmButtonText:'确认',
						  message: '您已进入范围内，可以进行打卡',
						  closeOnClickOverlay:true,
						}).then(() => {
						  // 现在可以调打卡接口
						  _this.punchCardSure();
						});
			        }
				})
			}).catch(() => {
			  // on cancel
			});
       	},
        //满足条件可以打卡
        punchCardSure(){
            //调打卡接口
            var status =  this.$route.query.status;
            const jdwdMeg = this.jdwdMeg;
            var query = {
                zsTaskId: this.$route.query.zsTaskId,
                xsTowerTaskId: this.$route.query.xsTowerTaskId,
                towerId: this.$route.query.towerId,
                towerTaskId:  this.$route.query.towerTaskId,
                lineId: this.$route.query.lineId,
                lineName: this.$route.query.lineName,
                towerName: this.$route.query.towerName,
                taskId:  this.$route.query.taskId,
                lineTowerId: this.$route.query.lineTowerId,
                status: this.$route.query.status,
                towerStatus: 1,//杆塔是否开始的状态
                page: this.$route.query.page,
                size: this.$route.query.size,
                index: this.$route.query.index,
            }
            
            callData('/zsTaskServer/ZsBdTowerTask/appZsTaskDk', 'put', {
            	zsTaskId:this.$route.query.zsTaskId,
            	punchDistance: jdwdMeg.distance,//打卡距离
            	jd: jdwdMeg.lon,
            	wd: jdwdMeg.lat,
            	isDw:0,//是否到位(0是到位，1是未到位)
            }).then(res => {
                //打卡成功之后，再去调开始杆塔任务开始接口
                if(res.success){
                   callData('/zsTaskServer/ZsBdTowerTask/appZsTowerStart', 'put', {
		            	xsTowerTaskId:this.$route.query.towerTaskId
		            }).then(res => {
		                if(res.success){
		                	Toast('打卡成功，巡视开始')
		                	this.$router.push({
                          		path:'/bdzs_allowPhotos',
                          		query
                     		})
		                }
		            })
                }else{
                	Toast(res.data)
                }
            })
        },
        goYhList() {
            this.$router.push({
				name:'bdzs_yinhuanList',
				query : {
					zsTaskId: this.$route.query.zsTaskId,
					towerId:this.$route.query.towerId,
					punchtype:this.$route.query.punchtype,
					lineId:this.$route.query.lineId,
					lineName:this.$route.query.lineName,
					towerStatus: this.params.towerStatus,
					towerName:this.$route.query.towerName,
					taskId :this.$route.query.taskId,
					lineTowerId :this.$route.query.lineTowerId,
					towerTaskId:this.$route.query.towerTaskId,
					page: this.$route.query.page,
					size: this.$route.query.size
	        	}
			})
        },
        goClArea() {
            this.alertMeg()
            // this.$router.push('/cgxs_ceLiang');
        },
        initData() {
        	const _this = this;
            //后台接口
            callData('/zsTaskServer/ZsBdTowerTask/appFindJWd', 'get', {
            	lineTowerId:this.$route.query.lineTowerId,
            }).then(res1 => {
            	this.locate =  res1.data;
           })
        },
        prompt() {
            this.alertMeg()
        }
    },
    mounted() {
        this.initData();
    }
}
</script>
